<template>
   <div class="module-block">
        <el-form :model="form.search" ref="elform" labelWidth="160px">
            <!-- 如果存在高级查询交互，可以设置baseCount --> 
            <pro-layout-content-search :baseCount="4" :columnCount="3" @search="handleSearch" @reset="handleResetFields">
                <template slot="action" slot-scope="{doSearch, doReset, handleMore,showMore}">
                    <div class="actionClass">
                        <pro-action type="primary" @handler="doSearch">查 询</pro-action>
                        <pro-action @handler="doReset">重 置</pro-action>
                        <pro-action @handler="handleMore" class="handeToggle">
                            <i :class="showMore ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                        </pro-action>
                    </div>
                </template>
                <!-- 文本输入 -->
                <pro-input key="value1" uiType="text" label="项目编号" v-model="form.search.value1" prop="value1" :span="18" />
                <pro-input key="value2" uiType="text" label="项目名称" v-model="form.search.value2" prop="value2" />
                <pro-input key="value3" uiType="text" label="信托计划简称" v-model="form.search.value3" prop="value3" />
                <pro-input key="value4" uiType="text" label="业务类别" v-model="form.search.value4" prop="value4" />
                <pro-input key="value5" uiType="text" label="信托财产性质标识" v-model="form.search.value5" prop="value5" />
                <pro-input key="value6" uiType="text" label="功能标识" v-model="form.search.value6" prop="value6" />
                <pro-input key="value7" uiType="text" label="信托经理" v-model="form.search.value7" prop="value7" />
                <pro-select key="value8" uiType="list" label="所属部门" dataSource="YES_OR_NOT" labelKey="name" valueKey="code" v-model="form.search.value8" prop="value8" />  
                <pro-select key="value9" uiType="list" label="项目阶段" dataSource="YES_OR_NOT" labelKey="name" valueKey="code" v-model="form.search.value9" prop="value9" />  
                <pro-select key="value10" uiType="list" label="项目来源" dataSource="YES_OR_NOT" labelKey="name" valueKey="code" v-model="form.search.value10" prop="value10" /> 
            </pro-layout-content-search>
        </el-form>
        <div style="margin-top:15px">
            <div class="table-operator">
                <div class="table-operator-left">
                    <pro-action type="primary" toComponentUrl="test-vue" productId="新建项目" title="新建项目">新建项目</pro-action>
                </div>
                <div class="table-operator-right">
                    <pro-action type="text" icon="el-icon-refresh" @handler="handleRefresh"></pro-action>
                    <pro-action type="text" icon="el-icon-delete" @handler="handleDelete"></pro-action>
                    <filter-columns tableRef="prodatatable" />
                    <pro-action type="text" icon="el-icon-upload2" @handler="handleUpload"></pro-action>
                </div>
            </div>
            <pro-data-table ref="prodatatable" :columns="columns" :dataSource="tableDatas" select-model="multiple" row-color='#F1F2F9' v-bind:selectRows.sync="selectRows" rowKey="entryName">
                <template slot="actionContent" slot-scope="{row, store, column}">
                    <pro-action type="text" size="small" command="smallCommand1" @handler="doHandle(row, store, column)">查看</pro-action>

                    <pro-action type="text" size="small" command="smallCommand2" @handler="doHandle(row, store, column)" :disabled="row.stage == '存续期'">编辑</pro-action>

                    <pro-action type="text" size="small" command="smallCommand3" @handler="doHandle(row, store, column)" :disabled="row.stage == '存续期' || row.stage == '项目成立'">删除</pro-action>
                </template>

                

                <template slot="businessContent" slot-scope="{row, store, column}">
                    <el-tag type="success">{{row.business}}</el-tag>
                </template>

                <template slot="entryNameContent" slot-scope="{row, store, column}">
                    <div style="color: #3A8DFF;cursor: pointer;text-decoration: underline;">{{row.entryName}}</div>
                </template>
            </pro-data-table>
                
        </div>
  </div>
</template>
<script>
    import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
    import {post} from 'mars-pro/src/pro/request';
    import createState from 'mars-pro/src/pro/createState'
    import { ProConfigProvideMixin } from 'mars-pro/packages/pro-config-provide'

    import filterColumns from '../filterColumns'
    
    // 模拟测试数据
    function getFromSelectListDataSource(request, response){
        const {current, pageSize} = request.body
        response.$delay(1000,{
            total: 100,
            list: [
                {entryName: '华润.光瑞 1号集合资金信托计划', business: 'ABN', identifier: '2022-0618', planName: '至臻荣享证券投资集合信托资金项目', stage: '项目事前',planType:'资产证券化',manager:'顾千帆', department:'同业金融一部'},
                {entryName: '华润.光瑞 2号集合资金信托计划', business: '信贷ABS', identifier: '2022-0619', planName: '至臻荣享证券投资集合信托资金项目', stage: '项目成立',planType:'资产证券化', manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 3号集合资金信托计划', business: '事务管理类', identifier: '2022-0620', planName: '至臻荣享证券投资集合信托资金项目', stage: '存续期', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 4号集合资金信托计划', business: '银登流转', identifier: '2022-0621', planName: '至臻荣享证券投资集合信托资金项目', stage: '项目事前', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 5号集合资金信托计划', business: '其他业务', identifier: '2022-0622', planName: '至臻荣享证券投资集合信托资金项目', stage: '项目成立', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 6号集合资金信托计划', business: '信贷ABS', identifier: '2022-0623', planName: '至臻荣享证券投资集合信托资金项目', stage: '存续期', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 7号集合资金信托计划', business: '事务管理类', identifier: '2022-0624', planName: '至臻荣享证券投资集合信托资金项目', stage: '存续期', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 8号集合资金信托计划', business: '银登流转', identifier: '2022-0625', planName: '至臻荣享证券投资集合信托资金项目', stage: '存续期', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 9号集合资金信托计划', business: 'ABN', identifier: '2022-0626', planName: '至臻荣享证券投资集合信托资金项目', stage: '存续期', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'},
                {entryName: '华润.光瑞 10号集合资金信托计划', business: '信贷ABS', identifier: '2022-0627', planName: '至臻荣享证券投资集合信托资金项目', stage: '存续期', planType:'资产证券化',manager:'顾千帆',department:'同业金融一部'}
            ],
            //模拟统计数据
            summary: {
                sumText: '某某统计',
                max: 99,
                min: 11
            }
        })
    }
    export default {
        name:"自定义列表查询",
        desc:"自定义列表查询区块",
        screenshot:"https://img.alicdn.com/imgextra/i4/O1CN01viScHq1xQC8KtFTIH_!!6000000006437-2-tps-1811-904.png",
        components:{
            filterColumns:filterColumns
        },
        mixins:[
            ProConfigProvideMixin,
            dataSource('tableDatas', post('/mock/post').mockData(getFromSelectListDataSource), {dataField: 'list'})
        ],
        data(){
            return {
                baseSearchKeys: null,
                form: createState({search: {}}),
                selectRows:[],
                columns:[
                    {prop: 'serial',label: '序号' ,type:'index',width:60},
                    {prop: 'business', label: '业务类别',width:110}, 
                    {prop: 'entryName', label: '项目名称',width:400},
                    {prop: 'identifier', label: '项目编号',width:110},
                    {prop: 'planName', label: '信托计划名称',width:400},
                    {prop: 'stage', label: '项目阶段'},
                    {prop: 'planType', label: '信托计划类型',width:110},
                    {prop: 'manager', label: '信托经理'},
                    {prop: 'department', label: '所属部门',width:110},
                    {prop: 'action', label: '操作',fixed:"right",width:160,disabled:true}
                ]
            }
        },
        methods:{
            handleSearch(baseProps){
                this.baseSearchKeys = baseProps
                this.tableDatas.resetDatas((data) => {
                    return {
                        ...this.form.search,
                        ...data
                    }
                })
            },
            handleResetFields(){
                this.$refs.elform.resetFields()
                this.handleSearch(this.baseSearchKeys)
            },
            getParams(){
                // 基于baseSearchKeys组织查询参数
            },
            doHandle(row, store, column){
                console.log(row, store, column)
            },
            handleRefresh(){
                this.tableDatas.loadDatas()
            },
            handleDelete(){
                console.log('handleDelete',this.selectRows)
            },
            handleUpload(){
                console.log('handleUpload')
            }
        }
    }
</script>
<style lang="scss">
.module-block{
    .actionClass{
        position: absolute;
        right:10px;
        top:0;
    }
    .pro-layout-content-search{
        border:0;
        .el-card__body{
            padding:0;
        }
    }
    .table-operator{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:10px;
        &-right{
            border:1px #D7D8E1 dashed;
            border-radius: 4px;
            .el-dropdown{
                border-left:1px #D7D8E1 dashed;
            }
            .pro-action{
                padding: 6px;
                border-left:1px #D7D8E1 dashed;
                margin:0;
                &:first-child{
                    border-left:0;
                }
                i[class^="el-icon-"]{
                    font-size: 20px;
                    margin-left:3px;
                }
            }
        }
    }
    .pro-data-table{
        .el-table{
            border:1px #d8d8d8 dashed;
        }
        .el-table__header,.el-table th.el-table__cell{
            background: #EFF0F5;
            color: #150C0C;
        }
        .statistics-warning-row{
            background: #F1F2F9 !important;
        }
    }
}
</style>